<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue Context Test Page</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="js/dist/index.css">
    </head>
    <body>
        <div id="app">
            <div class="container py-3 mt-5">
                <ul class="list-group">
                    <li v-for="(item, index) in items" :key="index"
                        class="list-group-item"
                        @contextmenu.prevent="$refs.menu.open"
                    >
                        {{ item }}
                    </li>
                </ul>

                <vue-context ref="menu" @close="onClose">
                    <template slot-scope="child">
                        <li tabindex="0">
                            <a href="#" class="v-context-item"
                               @click.prevent="onClick('item 1')"
                            >
                                Do something
                            </a>
                        </li>
                        <li class="v-context__sub">
                            <a href="#" class="v-context-item"
                               @click.prevent="onClick('item 2')"
                            >
                                Do something else
                            </a>
                            <ul class="v-context">
                                <li tabindex="0">
                                    <a href="#" class="v-context-item"
                                       @click.prevent="onClick('sub item 1')"
                                    >
                                        Submenu
                                    </a>
                                </li>
                                <li class="v-context__sub">
                                    <a href="#" class="v-context-item"
                                       @click.prevent="onClick('sub item 2')"
                                    >
                                        Submenu next
                                    </a>

                                    <ul class="v-context">
                                        <li tabindex="0">
                                            <a href="#" class="v-context-item"
                                               @click.prevent="onClick('sub sub item 1')"
                                            >
                                                We need to go deeper
                                            </a>
                                        </li>
                                        <li tabindex="0">
                                            <a href="#" class="v-context-item"
                                               @click.prevent="onClick('sub sub item 2')"
                                            >
                                                double nested Submenu
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" class="v-context-item"
                                       @click.prevent="onClick('sub item 3')"
                                    >
                                        Submenu next
                                    </a>
                                </li>
                                <li class="v-context__sub">
                                    <a href="#" class="v-context-item"
                                       @click.prevent="onClick('sub item 4')"
                                    >
                                        second nested Submenu
                                    </a>

                                    <ul class="v-context">
                                        <li tabindex="0">
                                            <a href="#" class="v-context-item"
                                               @click.prevent="onClick('sub sub item 3')"
                                            >
                                                sub sub
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="v-context-item"
                               @click.prevent="onClick('item 3')"
                            >
                                Another option
                            </a>
                        </li>
                    </template>
                </vue-context>
            </div>
        </div>

        <script src="js/dist/index.js"></script>
    </body>
</html>
